<template>
  <div style="padding-bottom: 50px;">
    <van-nav-bar
      title="办班日历表"
      left-text="返回"
      left-arrow
      v-bind:right-text="this.$data.rightTitle"
      @click-left="onClickLeft"
    />
    <van-calendar
      :poppable="false"
      :show-confirm="false"
      class="calendar"
      :formatter="formatter"
      :show-subtitle="false"
      :min-date="minDate" :max-date="maxDate"
      :show-title="false"
      @select="calendarSelect"
    />
    <van-tabs>
      <van-tab title="日程" v-model="index">
        <van-list>
          <!-- <van-cell v-for="item in list" :key="item">
            <div style="width: 100%;height: 80px;">
              <p>青春普陀训140人</p>
              <p>报告厅</p>
            </div>
          </van-cell> -->
          <div class="parent" v-for="item in list" :key="item">
            <div class="left"></div>
            <div class="right">
              <div>
                <span class="title-span">青春普陀训140人</span>
                <span class="start-time-span">上午8:00</span>
              </div>
              <!-- <br /> -->
              <div style="margin-top: 8px;">
                <span class="sub-title-span">报告厅</span>
                <span class="end-time-span">下午6:00</span>
              </div>
              <div style="background-color: #F3F3F3;height: 1px;width: 100%;margin-top: 16px;"></div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="备注">

      </van-tab>
    </van-tabs>
    <PageChangeControl class="page-control" preText="上个月" currText="本月" nextText="下个月" @pre="pre()" @current="current()" @next="next()"></PageChangeControl>
  </div>
</template>

<script>
import PageChangeControl from './PageChangeControl.vue'
export default {
  created() {
    this.$data.role = this.$route.query.role;
  },
  mounted() {
    let year = new Date().getFullYear();
    let month = new Date().getMonth();
    this.rightTitle = year + '年' + (month + 1) + '月'
    this.current()
  },
  data() {
    let year = new Date().getFullYear();
    let month = new Date().getMonth();
    return {
      rightTitle: '',
      index: 0,
      list: [1,2,3,4,5,6],
      role: -1,
      minDate: new Date(year, month, 1),
      maxDate: new Date(2021, 1, 0),
      currentDate:''
    };
  },
  methods: {
    formatter(day) {
      const year = day.date.getFullYear()
      const month = day.date.getMonth();
      const date_day = day.date.getDate();
      let date = new Date()
      let tyear = date.getFullYear();
      let tmonth = date.getMonth();
      var today = date.getDate()
      if (month === tmonth && month === tmonth) {
        if (date_day === today) {
          day.topInfo = '今天';
          day.bottomInfo = '·'
        }
      }
      return day;
    },
    onClickLeft() {
      this.$router.push({path:'/home',query:{role:this.$data.role}})
    },
    pre() {
      let year = this.currentDate != '' ? this.currentDate.getFullYear() : new Date().getFullYear();
      let month = this.currentDate != '' ? this.currentDate.getMonth() :  new Date().getMonth();
      var maxMonth = 0
      var maxYear = year
      if(month == 0) {
        month = 11
        year = year - 1
        maxYear = year + 1
        maxMonth = 0
      } else {
        month = month - 1
        maxMonth = month + 1
        if(month == 11) {
          maxMonth = 0
        }
      }
      let newDate = new Date(year, month, 1)
      let newMaxDate = new Date(maxYear, maxMonth, 0)
      this.minDate = newDate
      this.maxDate = newMaxDate
      this.rightTitle = year + '年' + (month + 1) + '月'
      this.currentDate = new Date(year,month)
      this.list = [1,2]
    },
    current() {
      let year = new Date().getFullYear();
      let month = new Date().getMonth();
      let newMaxDate = new Date(year, month + 1, 0)
      let newDate = new Date(year, month, 1)
      this.minDate = newDate
      this.maxDate = newMaxDate
      this.rightTitle = year + '年' + (month + 1) + '月'
      this.currentDate = new Date(year,month)
      this.list = [1,2,4,5,6]
    },
    next() {
      let year = this.currentDate != '' ? this.currentDate.getFullYear() : new Date().getFullYear();
      let month = this.currentDate != '' ? this.currentDate.getMonth() :  new Date().getMonth();
      var maxMonth = 0;
      var maxYear = year
      if(month == 11) {
        month = 0
        maxMonth = 1
        year = year + 1
        maxYear = year
      } else {
        month = month + 1
        maxMonth = month + 1
        if(month == 11) {
          maxMonth = 0
          maxYear = year + 1
        }
      }
      let newDate = new Date(year, month, 1)
      let newMaxDate = new Date(maxYear, maxMonth, 0)
      // console.log(newDate,newMaxDate)
      this.minDate = newDate
      this.maxDate = newMaxDate
      this.rightTitle = year + '年' + (month + 1) + '月'
      this.currentDate = new Date(year,month)
      this.list = [1]
    },
    calendarSelect(singleDate) {
      console.log(singleDate)
    }
  },
  components:{
    PageChangeControl
  }
}
</script>

<style>
  .calendar {
    width: 100%;
    height: 100%;
  }
  .van-calendar__month-title {
    display: none;
  }
  .van-tabs__nav--line {
    background-color: #F3F3F3;
  }
  .van-calendar__bottom-info {
    font-size: 40px;
    color: red;
    bottom: 10px;
  }
  .van-calendar__selected-day {
    background-color: #3E7EFF;
  }
  .parent {
    height: 80px;
  	display: flex;
  }
  .left {
    margin: 16px 0px 16px 16px;
    width: 4px;
    height: calc(100% - 32px);
    background-color: red;
    border-radius: 2px 2px 2px 2px;
  }
  .right {
    margin: 16px 16px 16px 8px;
    /* display: flex; */
    /* flex: 1; */
    text-align: left;
    width: calc(100% - 16px - 16px - 4px - 8px);
    height: calc(100% - 32px);
  }
  .start-time-span {
    display: inline-block;
    width: 20%;
    color: #1D1D1D;
    text-align: right;
  }
  .end-time-span {
    display: inline-block;
    width: 20%;
    color: #A1A1A1;
    text-align: right;
  }
  .title-span {
    display: inline-block;
    font-size: 16px;
    /* height: 16px; */
    color: #1D1D1D;
    font-weight: 500;
    width: 80%;
  }
  .sub-title-span {
    display: inline-block;
    font-size: 14px;
    height: 14px;
    color: #1D1D1D;
    font-weight: 300;
    width: 80%;
  }
  .page-control {
    left: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
</style>
